﻿@using BlockMain_Class
@{
    Layout = "/Views/Shared/_Layout.cshtml";
    var model = (PeerSelect)Model;
}
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    input, button, a {
        outline: none;
    }

    html, body {
        height: 100%;
    }

    .bgimg {
        height: 100%;
        width: 100%;
        background: url(/assets/images/all.png) no-repeat;
    }
    /*侧边栏*/
    .left {
        width: 4%;
        height: 100%;
        background-color: #32323a;
        float: left;
    }

        .left .logo {
            background-color: #393941;
            height: 55px;
            width: 100%;
            background-image: url(/assets/images/logo_1.png);
            background-repeat: no-repeat;
            background-size: 80%;
            background-position: 5px;
        }
    /*公链展示*/
    .right {
        width: 96%;
        height: 100%;
        float: left;
        color: white;
    }

        .right .top {
            height: 55px;
            width: 100%;
            background-color: rgba(6,142,220,0.9);
            font-size: 16px;
        }

            .right .top img {
                margin-right: 10px;
            }

            .right .top .user {
                width: 145px;
                height: 100%;
                float: left;
                margin-left: 60px;
                line-height: 55px;
            }

            .right .top .checkout {
                width: 105px;
                height: 100%;
                float: right;
                margin-right: 40px;
                line-height: 55px;
            }
        /*内容*/
        .right .middle .contant {
            width: 90%;
            margin: 30px auto 0;
        }

            .right .middle .contant .title {
                border-bottom: 3px solid rgb(6,142,220);
                padding-bottom: 5px;
                font-size: 26px;
                width: 140px;
                color: white;
                font-weight: bold;
                margin-bottom: 10px;
                text-align: center;
            }

    .search {
        width: 100%;
        height: 28px;
    }

    .searchleft {
        float: left;
        width: 500px;
    }

        .searchleft .input {
            width: 100%;
            font-size: 16px;
        }

    .searchright {
        float: right;
        width: 200px;
    }

        .searchright .type {
            width: 100%;
            font-size: 16px;
        }

    .information {
        background-image: url(/assets/images/bj_3.png);
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 10px;
        margin-bottom: 20px;
        width: 100%;
    }

    @@media screen and (max-height: 940px) {
        .information {
            height: 250px;
            padding-left: 40px;
            padding-top: 1px;
        }

            .information .txt table {
                margin-top: 10px;
                margin-bottom: 10px;
            }
    }

    @@media screen and (min-height: 941px) {
        .information {
            height: 357px;
            padding-left: 80px;
            padding-top: 30px;
        }

            .information .txt table {
                margin-top: 40px;
                margin-bottom: 20px;
            }
    }

    .information .txt {
        width: 675px;
        float: left;
    }

        .information .txt table td {
            color: #ddd;
        }

    table tr td, th {
        padding: 10px;
        font-size: 16px;
    }

    .described {
        border-top: 2px solid #75787a;
        padding-top: 20px;
        font-size: 16px;
    }

        .described p:first-child {
            font-weight: bold;
        }

        .described p:last-child {
            color: #ddd;
        }

        .described p span {
            margin-right: 10px;
        }
    /*新建任务*/
    @@media screen and (max-height: 940px) {
        .project {
            height: 174px;
        }
    }

    @@media screen and (min-height: 941px) {
        .project {
            height: 380px;
        }
    }

    .blue {
        color: rgb(6,142,220);
    }

    .project {
        overflow: scroll;
        overflow-x: hidden;
        height: 400px;
    }

        .project::-webkit-scrollbar { /*滚动条整体样式*/
            width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
            height: 4px;
        }

        .project::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
            border-radius: 5px;
            -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0.2);
            background: rgba(255,255,255,0.2);
        }

        .project::-webkit-scrollbar-track { /*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0.2);
            border-radius: 0;
            background: rgba(255,255,255,0.2);
        }

        .project:last-child {
            border-radius: 10px;
        }

        .project table {
            width: 100%;
            height: 100%;
            font-size: 16px;
        }

            .project table tr:nth-child(even) {
                background-color: rgba(64,62,75,0.8);
            }

            .project table tr:nth-child(odd) {
                background-color: rgba(48,47,57,0.8);
            }

            .project table tr {
            }

                .project table tr td {
                    /*padding: 10px 20px;*/
                }

    .inform > div {
        margin-bottom: 50px;
    }

    .qualified {
        width: 300px;
        height: 35px;
    }

        .qualified div {
            float: left;
        }

        .qualified .select {
            width: 135px;
            height: 100%;
            line-height: 35px;
            text-align: center;
            margin-left: 8px;
        }

        .qualified .yes {
            background-color: #06a4fc;
            height: 100%;
            width: 50%;
            border-radius: 5px 0px 0px 5px;
        }

    .contrary-yes {
        border: 1px solid #ff455f;
        height: 100%;
        width: 50%;
        border-radius: 5px 0px 0px 5px;
    }

    .qualified .no {
        border: 1px solid #06a4fc;
        height: 100%;
        width: 50%;
        border-radius: 0px 5px 5px 0px;
    }

    .contrary-no {
        background-color: #ff455f;
        height: 100%;
        width: 50%;
        border-radius: 0px 5px 5px 0px;
    }

    .up {
        width: 400px;
        height: 35px;
        margin-top: 20px;
        float: left;
    }

        .up a {
            color: white;
            text-decoration: none;
        }

    .post {
        width: 220px;
        height: 35px;
        background-color: #06a4fc;
        float: right;
        margin-top: 20px;
        line-height: 35px;
        text-align: center;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
    }

    .svg {
        width: 40%;
        height: 100%;
        float: left;
    }
</style>
<script type="text/javascript" src="~/js/d3.v3.min.js"></script>
<body>
    <div class="bgimg">
        <div class="left">
            <div class="logo"></div>
        </div>
        <div class="right">
            <div class="top">
                <div class="user">
                    <img class="user-img" src="/assets/images/touxiang.png" />
                    <span class="txt">欢迎登录</span>
                </div>
                <div class="checkout">
                    <img class="checkout-img" src="/assets/images/fytuichu.png" />
                    <span class="txt" onclick="LoginOut()">退出</span>
                </div>
            </div>
            <div class="middle">
                <div class="contant">
                    <div class="information">
                        <div class="txt">
                            <h1>@(model.name)</h1>
                            <table border="0" cellspacing="" cellpadding="">
                                <tr>
                                    <th>节点IP</th>
                                    <td>@(model.Ip)</td>
                                    <th>节点状态</th>
                                    <td>@(model.state == 0 ? "数据已同步" : "数据未同步")</td>
                                </tr>
                                <tr>
                                    <th>加入时间</th>
                                    <td colspan="3">@(model.addtime)</td>
                                </tr>
                            </table>
                            <div class="described">
                                <p>节点描述</p>
                                <p><span>@(model.detail)</span></p>
                            </div>

                        </div>
                        <div class="svg">

                        </div>
                    </div>
                    <div class="prog">
                        <div class="title">
                            区块数值
                        </div>
                        <div class="project">
                            <table>

                                @foreach (var item in model.Blocks)
                                {
                                    <tr>
                                        <td rowspan="2">
                                            <p>区块</p>
                                            <p>@item.Heigth</p>
                                        </td>
                                        <td>哈希值</td>
                                        <td class="blue">@item.Hash</td>
                                        <td>生成时间</td>
                                        <td>@item.addtime</td>
                                    </tr>
                                    <tr>
                                        <td>前哈希值</td>
                                        <td class="blue" colspan="3">@item.PrevHash</td>
                                    </tr>
                                }

                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    var nodes = [{ name: "1", group: "4" },
    { name: "2", group: "1" },
    { name: "3", group: "1" },
    { name: "4", group: "1" },
    { name: "5", group: "1" },
    { name: "6", group: "1" },
    { name: "7", group: "1" },
    { name: "8", group: "4" },
    { name: "9", group: "4" },
    { name: "10", group: "4" }];
    var edges = [{ source: 0, target: 1 }, { source: 1, target: 2 }, { source: 2, target: 3 }, { source: 3, target: 4 }, { source: 4, target: 5 }, { source: 5, target: 0 }, { source: 0, target: 1 }, { source: 1, target: 2 }, { source: 2, target: 3 }, { source: 3, target: 4 }, { source: 4, target: 5 }, { source: 0, target: 7 }, { source: 0, target: 1 }, { source: 1, target: 2 }, { source: 2, target: 3 }, { source: 3, target: 4 }, { source: 4, target: 5 }, { source: 0, target: 8 }, { source: 0, target: 1 }, { source: 1, target: 2 }, { source: 2, target: 3 }, { source: 3, target: 4 }, { source: 4, target: 5 }, { source: 7, target: 8 }, { source: 0, target: 1 }, { source: 1, target: 2 }, { source: 2, target: 3 }, { source: 3, target: 4 }, { source: 4, target: 5 }, { source: 7, target: 9 }, { source: 0, target: 1 }, { source: 1, target: 2 }, { source: 2, target: 3 }, { source: 3, target: 4 }, { source: 4, target: 5 }, { source: 8, target: 9 }, { source: 0, target: 1 }, { source: 1, target: 2 }, { source: 2, target: 3 }, { source: 3, target: 4 }, { source: 4, target: 5 }, { source: 9, target: 3 }, { source: 0, target: 1 }, { source: 1, target: 2 }, { source: 2, target: 3 }, { source: 3, target: 4 }, { source: 4, target: 5 }, { source: 9, target: 4 }, { source: 0, target: 1 }, { source: 1, target: 2 }, { source: 2, target: 3 }, { source: 3, target: 4 }, { source: 4, target: 5 }, { source: 9, target: 5 }, { source: 0, target: 1 }, { source: 1, target: 2 }, { source: 2, target: 3 }, { source: 3, target: 4 }, { source: 4, target: 5 }, { source: 7, target: 2 }, { source: 0, target: 1 }, { source: 1, target: 2 }, { source: 2, target: 3 }, { source: 3, target: 4 }, { source: 4, target: 5 }, { source: 8, target: 5 }, { source: 0, target: 1 }, { source: 1, target: 2 }, { source: 2, target: 3 }, { source: 3, target: 4 }, { source: 4, target: 5 }, { source: 9, target: 6 }, { source: 0, target: 1 }, { source: 1, target: 2 }, { source: 2, target: 3 }, { source: 3, target: 4 }, { source: 4, target: 5 }, { source: 6, target: 2 }, { source: 0, target: 1 }, { source: 1, target: 2 }, { source: 2, target: 3 }, { source: 3, target: 4 }, { source: 4, target: 5 }, { source: 6, target: 3 }, { source: 0, target: 1 }, { source: 1, target: 2 }, { source: 2, target: 3 }, { source: 3, target: 4 }, { source: 4, target: 5 }, { source: 7, target: 1 }, { source: 0, target: 1 }, { source: 1, target: 2 }, { source: 2, target: 3 }, { source: 3, target: 4 }, { source: 4, target: 5 }, { source: 7, target: 6 }, { source: 0, target: 1 }, { source: 1, target: 2 }, { source: 2, target: 3 }, { source: 3, target: 4 }, { source: 4, target: 5 }, { source: 8, target: 6 }];


    var width = 310,
        height = 310;

    var svg = d3.select(".svg")
        .append("svg")
        .attr("width", width)
        .attr("height", height);

    var force = d3.layout.force()
        .nodes(nodes)
        .links(edges)
        .size([width, height])
        .linkStrength(0)
        .linkDistance(80)//指定连线长度
        .charge([-300]);//指定相互之间的作用力
    //负电荷数
    //上面的语句定义了力布局方式
    //并用力布局的方式使得原始数据变成了画力导向图
    //所需要的数据格式
    $("svg").css("float", "right")
    force.start();//开始作用力

    console.log(nodes);
    console.log(edges);

    //看控制台输出的数据，已经发生了变化

    var color = d3.scale.category20();

    //添加节点
    var svg_nodes = svg.selectAll("circle")
        .data(nodes)
        .enter()
        .append("circle")
        .attr("r", 10)
        .style("fill", function (d) { return color(d.group); })
        .call(force.drag);
    //call使得节点能够被拖拽

    svg_nodes.on("mouseover", function () {
        $(this).attr("r", 13)
        console.log($(this))
    })
    svg_nodes.on("mouseout", function () {
        $(this).attr("r", 10)
        console.log($(this))
    })
    //添加连线
    var svg_edges = svg.selectAll("line")
        .data(edges)
        .enter()
        .append("line")
        .attr("stroke", "#ccc")
        .attr("stroke-width", 1);
    //添加文字
    var svg_texts = svg.selectAll("text")
        .data(nodes)
        .enter()
        .append("text")
        .attr("size", 10)
        .attr("fill", "blue")
        .attr("dx", 20)
        .attr("dy", 8)
    //                         .text(function (d) {return d.name;});

    //第一次敲到这儿的时候，我打开网页看了一下效果
    //本以为会有静态的图，结果是所有东西都聚在了左上角
    //想想可能是因为上面只是添加了一些元素
    //指定了一些相对位置以及确定的量
    //但是具体的元素坐标等还是没有说明
    //所以需要下面这一段代码

    force.on("tick", function () {
        svg_edges.attr("x1", function (d) { return d.source.x; })
            .attr("y1", function (d) { return d.source.y; })
            .attr("x2", function (d) { return d.target.x; })
            .attr("y2", function (d) { return d.target.y; });

        svg_nodes.attr("cx", function (d) { return d.x; })
            .attr("cy", function (d) { return d.y; });

        svg_texts.attr("x", function (d) { return d.x; })
            .attr("y", function (d) { return d.y; });
    })

        //tick：滴答滴答，鼠标触发事件

</script>